﻿<div class="text-center">
    <MMenu @bind-Value="menu" OffsetX NudgeWidth=200 CloseOnContentClick="false">
        <ActivatorContent>
            <MButton Color="primary" @attributes="@context.Attrs">POPOVER MENU</MButton>
        </ActivatorContent>

        <ChildContent>
            <MCard>
                <MList>
                    <MListItem>
                        <MListItemAvatar>
                            <img src="https://cdn.masastack.com/stack/images/website/masa-blazor/jack.png"
                                 alt="MASA">
                        </MListItemAvatar>

                        <MListItemContent>
                            <MListItemTitle>MASA</MListItemTitle>
                            <MListItemSubtitle>Founder of MASA Blazor</MListItemSubtitle>
                        </MListItemContent>

                        <MListItemAction>
                            <MButton Icon Class=@(fav ? "red--text" : "") OnClick="() => fav = !fav">
                                <MIcon>mdi-heart</MIcon>
                            </MButton>
                        </MListItemAction>
                    </MListItem>
                </MList>

                <MDivider></MDivider>

                <MList>
                    <MListItem>
                        <MListItemAction>
                            <MSwitch @bind-Value="message" Color="purple"></MSwitch>
                        </MListItemAction>
                        <MListItemTitle>
                            Enable messages
                        </MListItemTitle>
                    </MListItem>

                    <MListItem>
                        <MListItemAction>
                            <MSwitch @bind-Value="hints" Color="purple"></MSwitch>
                        </MListItemAction>
                        <MListItemTitle>
                            Enable hints
                        </MListItemTitle>
                    </MListItem>
                </MList>

                <MCardActions>
                    <MSpacer></MSpacer>
                    <MButton Text OnClick="() => menu = false">Cacnel</MButton>
                    <MButton Text Color="primary" OnClick="() => menu = false">Save</MButton>
                </MCardActions>
            </MCard>
        </ChildContent>
    </MMenu>
</div>

@code {
    bool fav = true;
    bool menu = false;
    bool message = false;
    bool hints = true;
}